import React from 'react';
import type {Moment} from 'moment';
import moment from 'moment';
import Picker from '../../date-picker/Picker';
import momentGenerateConfig from '../../date-picker/generate/moment';
import zhCN from '../../date-picker/locale/zh_CN';
import enUS from '../../date-picker/locale/en_US';
import '../../assets/index.less';

const Customization = () => {
  const defaultValue = moment('2019-11-28 01:02:03');
  const [value, setValue] = React.useState<Moment | null>(defaultValue);
  const weekRef = React.useRef<Picker<Moment>>(null);

  const onSelect = (newValue: Moment) => {
    console.log('Select:', newValue);
  };

  const onChange = (newValue: Moment | null, formatString?: string) => {
    console.log('Change:', newValue, formatString);
    setValue(newValue);
  };

  // 修改输入内容框的样式
  const style ={'color':'red'}

  const popupStyle ={'color':'blue','backgroundColor':'#8cc265'}

  const sharedProps = {
    generateConfig: momentGenerateConfig,
    value,
    style,
    popupStyle,
    onSelect,
    onChange
  };
  return (
    <>
      <div>
        <h1>Value: {value ? value.format('YYYY-MM-DD HH:mm:ss') : 'null'}</h1>

        <div style={{display: 'flex', flexWrap: 'wrap'}}>
          <div style={{margin: '0 8px'}}>
            <h3>Basic</h3>
            <Picker<Moment> {...sharedProps} locale={zhCN} />
          </div>
        </div>
      </div>
    </>
  );
};

export default Customization;
